<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/front/lib/layui/css/layui.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/front/css/reset.css" />
		<link rel="stylesheet" type="text/css" href="${BASE_PATH}/static/front/css/htmleaf-demo.css">
		<link rel="stylesheet" href="${BASE_PATH}/static/front/css/style.css">
		<!--[if IE]>
		<script src="http://libs.useso.com/js/html5shiv/3.7/html5shiv.min.js"></script>
	<![endif]-->
		<style type="text/css">
			.layui-tab-item {
				width: 100%;
			}
			.name{
				position: relative;
				top: 10px;
				left: 20px;
				padding-bottom: 10px;
			}
		</style>
	</head>

	<body>
		<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
			<div class="name">客户姓名：${userInfo.kfUserName}</div>
			<div class="name">性别：${userInfo.sexName}</div>
			<div class="name">身份证：${userInfo.kfUserId}</div>
			<div class="name">电话：${userInfo.kfUserPhone}</div>
			<div class="name">地址：${userInfo.kfUserAdds}</div>
		</fieldset>

		<div class="layui-tab">
			<ul class="layui-tab-title">
				<li class="layui-this">淘宝消费记录</li>
				<li>京东消费记录</li>
				<li>通话记录</li>
				<li>暂无</li>
			</ul>
			<div class="layui-tab-content">
				<div class="layui-tab-item layui-show">
					<table class="blue">
						<thead>
							<tr>
								<th>订单号</th>
								<th>订单时间</th>
								<th>订单金额</th>
							</tr>
						</thead>
						<tbody>
							[#list taobaoConsumption as taobaoConsumption]
							<tr>
								<td>${taobaoConsumption.orderId}</td>
								<td>${taobaoConsumption.orderTime?datetime}</td>
								<td>￥${taobaoConsumption.orderAmt}</td>
							</tr>
							[/#list]
						</tbody>
						<thead>
							<tr>
								<th>订单状态</th>
								<th>商品名称</th>
								<th>商品数量</th>
							</tr>
						</thead>
						<tbody>
							[#list taobaoConsumption as taobaoConsumption]
							<tr>
								<td>${taobaoConsumption.orderStatus}</td>
								<td>${taobaoConsumption.items}</td>
								<td>${taobaoConsumption.itemQuantity}</td>
							</tr>
							[/#list]
						</tbody>
						<thead>
							<tr>
								<th>收货人</th>
								<th>收货人电话</th>
								<th>收货地址</th>
							</tr>
						</thead>
						<tbody>
							[#list taobaoConsumption as taobaoConsumption]
							<tr>
								<td>${taobaoConsumption.receivePersonName}</td>
								<td>${taobaoConsumption.receivePersonMobile}</td>
								<td>${taobaoConsumption.receiveAddress}</td>
							</tr>
							[/#list]
						</tbody>
					</table>
				</div>
				<div class="layui-tab-item">
					<table class="blue">
						<thead>
							<tr>
								<th>商品名</th>
								<th>收货地址</th>
								<th>订单时间</th>
							</tr>
						</thead>
						<tbody>
							[#list jingdongConsumptions as jingdongConsumptions]
							<tr>
								<td>${jingdongConsumptions.goodsName}</td>
								<td>${jingdongConsumptions.consigneeAddr}</td>
								<td>${jingdongConsumptions.orderDate?datetime}</td>
							</tr>
							[/#list]
						</tbody>
						<thead>
							<tr>
								<th>订单金额</th>
								<th>收货人</th>
								<th>收货人电话</th>
							</tr>
						</thead>
						<tbody>
							[#list jingdongConsumptions as jingdongConsumptions]
							<tr>
								<td>￥${jingdongConsumptions.orderMoney}</td>
								<td>${jingdongConsumptions.consigneePerson}</td>
								<td>${jingdongConsumptions.tel}</td>
							</tr>
							[/#list]
						</tbody>
						<thead>
							<tr>
								<th>订单状态</th>
								<th>支付类型</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							[#list jingdongConsumptions as jingdongConsumptions]
							<tr>
								<td>${jingdongConsumptions.orderStatus}</td>
								<td>${jingdongConsumptions.payType}</td>
								<td></td>
							</tr>
							[/#list]
						</tbody>
					</table>
				</div>
				<div class="layui-tab-item">
					<table class="blue">
						<thead>
							<tr>
								<th>通话地点</th>
								<th>通话时间</th>
								<th>通话时长</th>
							</tr>
						</thead>
						<tbody>
							[#list callRecordInfos as callRecordInfos]
							<tr>
								<td>${callRecordInfos.callAddress}</td>
								<td>${callRecordInfos.callDateTime?datetime}</td>
								<td>${callRecordInfos.callTimeLength}</td>
							</tr>
							[/#list]
						</tbody>
						<thead>
							<tr>
								<th>通话类型</th>
								<th>与本机通话号码</th>
								<th></th>
							</tr>
						</thead>
						<tbody>
							[#list callRecordInfos as callRecordInfos]
							<tr>
								<td>${callRecordInfos.callTypeName}</td>
								<td>${callRecordInfos.mobileNo}</td>
								<td></td>
							</tr>
							[/#list]
						</tbody>
					</table>
				</div>
				<div class="layui-tab-item">内容4</div>
			</div>

			<script src="${BASE_PATH}/static/front/lib/layui/layui.js" type="text/javascript" charset="utf-8"></script>
			<script type="text/javascript">
				layui.use('element', function() {
					var $ = layui.jquery,
						element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
				});
			</script>
			<script src="http://libs.useso.com/js/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
			<script>
				window.jQuery || document.write('<script src="${BASE_PATH}/static/front/js/jquery-2.1.1.min.js"><\/script>')
			</script>
			<script type="text/javascript">
				;
				(function($) {
					$.fn.fixMe = function() {
						return this.each(function() {
							var $this = $(this),
								$t_fixed;

							function init() {
								$this.wrap('<div class="container" />');
								$t_fixed = $this.clone();
								$t_fixed.find("tbody").remove().end().addClass("fixed").insertBefore($this);
								resizeFixed();
							}

							function resizeFixed() {
								$t_fixed.find("th").each(function(index) {
									$(this).css("width", $this.find("th").eq(index).outerWidth() + "px");
								});
							}

							function scrollFixed() {
								var offset = $(this).scrollTop(),
									tableOffsetTop = $this.offset().top,
									tableOffsetBottom = tableOffsetTop + $this.height() - $this.find("thead").height();
								if(offset < tableOffsetTop || offset > tableOffsetBottom)
									$t_fixed.hide();
								else if(offset >= tableOffsetTop && offset <= tableOffsetBottom && $t_fixed.is(":hidden"))
									$t_fixed.show();
							}
							$(window).resize(resizeFixed);
							$(window).scroll(scrollFixed);
							init();
						});
					};
				})(jQuery);

				$(document).ready(function() {
					$("table").fixMe();
					$(".up").click(function() {
						$('html, body').animate({
							scrollTop: 0
						}, 2000);
					});
				});
			</script>
	</body>

</html>